<template>
	<div id="tableHeaderContainer" class="table-header-container">
		<el-card :body-style="{ padding: '0px' }" shadow="never" style="border: none">
			<template #header>
				<div class="wrapper">
					<el-tooltip class="item" effect="dark" :content="showArrow ? '点击展开/收起查询条件' : title" placement="top">
						<el-button type="text" @click="collapsed">
							{{ title }}
							<i v-if="showArrow" :class="showSearchContent ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
						</el-button>
					</el-tooltip>
					<div class="left-wrapper">
						<slot name="left"></slot>
					</div>
					<div class="flex-sub"></div>
					<div class="right-wrapper">
						<slot name="right"></slot>
					</div>
				</div>
			</template>
			<el-collapse-transition>
				<div v-show="collapsedState">
					<el-row v-for="(row, i) of filterSearchModel" :key="i" :gutter="20" :class="{ 'margin-top': i !== 0 }" class="search-content-wrapper">
						<el-col v-for="(item, index) of row" :key="index" :span="$isMobile ? 24 : row.length === 1 && item.type === 'action' ? 24 : item.span || 8">
							<div v-if="item.type === 'input'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-input v-model="item.value" :placeholder="item.placeholder || '请输入内容'" clearable class="form-item" />
							</div>
							<div v-else-if="item.type === 'select'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-select
									v-model="item.value"
									:placeholder="item.placeholder || '请选择条目'"
									:filterable="item.filterable ? true : false"
									clearable
									class="form-item"
									@change="item.onChange ? item.onChange(item.value, item.associatedOption || '') : () => {}"
								>
									<el-option v-for="optionItem in item.selectOptions" :key="optionItem.value" :value="optionItem.value" :label="optionItem.label" />
								</el-select>
							</div>
							<div v-else-if="item.type === 'date-range'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-date-picker v-model="item.value" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-item" />
							</div>
							<div v-else-if="item.type === 'date'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-date-picker v-model="item.value" type="date" range-separator="-" :placeholder="item.placeholder || '请选择日期'" class="form-item" />
							</div>
							<div v-else-if="item.type === 'datetime'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-date-picker v-model="item.value" type="datetime" :placeholder="item.placeholder || '请选择日期'" class="form-item" />
							</div>
							<div v-else-if="item.type === 'time'" class="flex search-item-wrapper">
								<span>{{ item.label }}</span>
								<el-time-picker
									v-model="item.value"
									arrow-control
									:picker-options="{
										selectableRange: '00:00:00 - 23:59:59'
									}"
									:placeholder="item.placeholder || '请选择时间'"
									class="form-item"
								/>
							</div>
							<div v-else-if="item.type === 'action'" class="flex justify-end">
								<el-button type="success" size="small" :icon="RefreshIcon" @click="doResetSearch">重置</el-button>
								<el-button type="primary" size="small" :icon="SearchIcon" @click="doSearch">搜索</el-button>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-collapse-transition>
		</el-card>
	</div>
</template>

<script lang="ts">
import { computed, ref, defineComponent, PropType, watch, nextTick } from 'vue'
import { Search as SearchIcon, Refresh as RefreshIcon } from '@element-plus/icons'
import useEmit from '@/hooks/Emit'

export default defineComponent({
	props: {
		title: {
			type: String,
			default: '基本操作'
		},
		canCollapsed: {
			type: Boolean,
			default: false
		},
		searchModel: {
			type: Array as PropType<Array<FormItem>>,
			default: null
		},
		defaultCollapsedState: {
			type: Boolean,
			default: true
		}
	},
	emits: ['doSearch', 'resetSearch'],
	setup(props, { emit }) {
		const showSearchContent = ref(props.defaultCollapsedState)

		const showArrow = computed(() => {
			return props.canCollapsed && !!props.searchModel && props.searchModel.length !== 0
		})

		const collapsedState = computed(() => {
			return showSearchContent.value && showArrow.value
		})
		const emitter = useEmit()
		watch(
			() => collapsedState.value,
			newVal => {
				nextTick(() => {
					emitter?.emit('table-collapse-transition', newVal)
				})
			}
		)

		const filterSearchModel = computed(() => {
			if (!props.searchModel) return []
			const tmp: Array<any> = []
			props.searchModel.forEach((it, index) => {
				const tmpIndex = Math.floor(index / 3)
				if (!tmp[tmpIndex]) {
					tmp[tmpIndex] = []
				}
				tmp[tmpIndex].push(it)
			})
			if (tmp.length > 0) {
				const lastItem = tmp[tmp.length - 1]
				if (lastItem.length < 3) {
					lastItem.push({
						type: 'action'
					})
				} else {
					const actions = [{ type: 'action' }]
					tmp[tmp.length] = actions
				}
			}
			return tmp
		})
		function collapsed() {
			showSearchContent.value = !showSearchContent.value
		}
		function doSearch() {
			emit('doSearch')
		}
		function doResetSearch() {
			props.searchModel.forEach(it => {
				it.value = ''
			})
			emit('resetSearch')
		}
		return {
			showSearchContent,
			showArrow,
			collapsedState,
			filterSearchModel,
			collapsed,
			doSearch,
			doResetSearch,
			SearchIcon,
			RefreshIcon
		}
	}
})
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
	padding: 0px 10px;
}

.table-header-container {
	.wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		.left-wrapper {
			margin-left: 5px;
		}
	}
	.search-content-wrapper {
		padding: 10px;
		.search-item-wrapper {
			justify-content: center;
			align-items: center;
			& > span {
				color: #606266;
				font-size: 14px;
				font-weight: 500;
				margin-right: 8px;
			}
			.form-item {
				flex: 1;
			}
		}
	}
}
</style>
